<!--
 * @Author: MarsLay
 * @Date: 2021-12-23 09:39:56
 * @LastEditTime: 2023-12-29 14:23:48
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 侧边栏选择列表
 * @FilePath: \smart-sports-managee:\project\autopilot\App\components\select\list.vue
-->
<template>
  <view class="list">
    <uni-drawer ref="showRight" mode="right" :maskClick="true" :width="750">
      <l-header callback :title="title" @back="back"></l-header>
      <b-button ref="Cbutton" :param.sync="handler" @handler="confirm" @select="select"></b-button>
      <view class="form-module has-btn pd20" :style="{ top: nav ? `calc(${nav.navHeight}px)` : '' }">
        <block v-if="selectlist.length > 0">
          <scroll-view :scroll-y="true" class="scroll">
            <checkbox-group v-if="handler.multiple" @change="checkboxChange">
              <label v-for="(item, index) in currentList" :key="index">
                <view class="single-select">
                  <view class="single-inner">
                    <avatar shape="circle" :size="45" :src="item.headimg" fit='aspectFill'></avatar>
                    <view class="username">{{ item.username }}</view>
                  </view>
                  <checkbox :value="String(item[param])" :checked="item.checked" />
                </view>
              </label>
            </checkbox-group>
            <radio-group v-else @change="radioChange">
              <label v-for="(item, index) in currentList" :key="index">
                <view class="single-select">
                  <view class="single-inner">
                    <avatar shape="circle" :size="45" :src="item.headimg" fit='aspectFill'></avatar>
                    <view class="username">{{ item.username }}</view>
                  </view>
                  <radio :value="String(item[param])" :checked="item.checked" />
                </view>
              </label>
            </radio-group>
          </scroll-view>
        </block>
        <block v-else>
          <view class="noData-center">
            <image src="../../static/img/common/no-data.png"></image>
          </view>
        </block>
      </view>
    </uni-drawer>
  </view>
</template>

<script>
import bButton from "@/components/button/button";

export default {
  name: "list",
  components: { bButton },
  props: {
    title: {
      type: String,
      default: "",
    },
    param: {
      type: String,
      default: "",
    },
    selectlist: {
      type: Array,
      default: () => [],
    },
    handler: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      currentList: this.selectlist
    };
  },
  computed: {
    nav() {
      return uni.getStorageSync("navInfo");
    },
  },
  watch: {},
  mounted() { },
  methods: {
    open() {
      this.handler.selectAll = this.currentList.every((v) => v.checked == true);
      this.$refs.showRight.open();
    },
    back() {
      this.$refs.showRight.close();
    },
    select(v) {
      this.currentList.map((x) => this.$set(x, "checked", v));
    },
    checkboxChange(e) {
      this.currentList.map((v) => {
        this.$set(v, "checked", e.detail.value.includes(String(v[this.param])));
      });
      this.handler.selectAll = this.currentList.every((v) => v.checked == true);
      this.$refs.Cbutton.isAll(this.handler.selectAll);
    },
    radioChange(e) {
      this.currentList.map((v) => {
        this.$set(v, "checked", e.detail.value == String(v[this.param]));
      });
    },
    confirm() {
      let list = [];
      this.currentList.map((v) => v.checked && list.push(v[this.param]));
      if (list.length == 0) {
        this.$util.tip({ title: "请至少选择一项" });
        return;
      }
      this.$emit("change", list);
      this.back();
    },
  },
};
</script>

<style lang="less" scoped>
.scroll {
  height: 100%;
}

.scroll ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}


.uni-label-pointer:not(:last-child) {
  .single-select {
    margin-bottom: 20upx;
  }
}

/*  #ifdef MP-WEIXIN  */
.single-select {
  margin-bottom: 20upx;
}

/*  #endif  */

.username {
  margin-left: 20upx;
  font-size: 34upx;
  color: #1d256e;
  text-align: center;
}

.single-select {
  .flex();
  padding: 20upx 40upx;
  background-color: #ffffff;
  border-radius: 20upx;

  .single-inner {
    .flex(row, flex-start);
    padding-right: 20upx;
    width: calc(100% - 33upx - 10upx);
    min-height: 90upx;
    color: #1d256e;
  }
}
</style>
